Консультация по CSS framework-ам

[Анна]

Пока что их не использовала, решила сделать на одном из них адаптивный сайт и заодно набрать опыта. Сразу возникли вопросы, вы подчищаете потом код или так и оставляете этот избыточный CSS файл. В принципе для стационарных компов с интернетом это не проблема, но на сколько целесообразно оставлять его для мобильных устройств? А подчищать я посмотрела так много всего, что наверное  одно и то же время займет написать самой? Посоветуйте, как вы делаете?

Рассматривала Bootstarp и  Foundation.

[ShumNo]

а какова избыточность в kb?

[klierik]

Bootstrap 3.0.3:

 

CSS

-rw-r--r--  1 aleksej  staff    15K Jan  7 13:06 bootstrap-theme.css-rw-r--r--  1 aleksej  staff    37K Jan  7 13:06 bootstrap-theme.css.map-rw-r--r--  1 aleksej  staff    13K Jan  7 13:06 bootstrap-theme.min.css-rw-r--r--  1 aleksej  staff   117K Jan  7 13:06 bootstrap.css-rw-r--r--  1 aleksej  staff   233K Jan  7 13:06 bootstrap.css.map-rw-r--r--  1 aleksej  staff    96K Jan  7 13:06 bootstrap.min.css

Font

-rw-r--r--  1 aleksej  staff    20K Jan  7 13:06 glyphicons-halflings-regular.eot-rw-r--r--  1 aleksej  staff    61K Jan  7 13:06 glyphicons-halflings-regular.svg-rw-r--r--  1 aleksej  staff    40K Jan  7 13:06 glyphicons-halflings-regular.ttf-rw-r--r--  1 aleksej  staff    23K Jan  7 13:06 glyphicons-halflings-regular.woff

JS

-rw-r--r--  1 aleksej  staff    54K Jan  7 13:06 bootstrap.js-rw-r--r--  1 aleksej  staff    28K Jan  7 13:06 bootstrap.min.js

Что в целом в сумме пожет таки набежать достаточно много...

 

Я использую Bootstrap для создания мобильных веб-ресурсов (с поддержкой iPhone/iPad и аналогичных устройств). Бутсрап весь как есть из коробки не нужен в данном случае. Его можно легко пересобрать локально исключив все лишнее и оставив, к примеру, даже только grid + mixin )

3я версия стала очень гибкой в конфигурировании, так что использовать только то что надо она позволяет.

[Анна]

Его можно легко пересобрать локально исключив все лишнее и оставив, к примеру, даже только grid + mixin )

Спасибо! 

[Анна]

klierik, а интерфейс для сборки только в LESS, для сборки обычного CSS нету его?

[Игорь Ермаков]

Объясните нахрена нужен бутстрап? Меня один раз заставили использовать так я весь изматерился, ну не мудрено, у меня ведь руки из жопы, всё хорошее у меня в руках будет работать не правильно. Тем не менее суть я так и не понял, что касается css вообще не очевидны преимущества. 

[ShumNo]

Бытует мнение, что для части сайтов фреймворки типа bootstrap облегчают жизнь

[Анна]

Игорь Ермаков думаю, что он именно удобен для быстрой адаптивной верстки.

[Игорь Ермаков]

Бытует мнение, что для части сайтов фреймворки типа bootstrap облегчают жизнь

Чем? И кому? Вот есть у меня селект кастомный и чем мне здесь бутстрап поможет? Или нарисовал дизайнер кнопку, ну типа ок, а где в бутстрапе за 5 сек настроить себе такую же? 

Игорь Ермаков думаю, что он именно удобен для быстрой адаптивной верстки.

Можно ещё один в корне идиотский вопрос, да.

Что такое адаптивная вёрстка, не я знаю, мобилы, планшеты, вся фигня. 

Можно мне пример адаптивно свёрстанного сайта, чтобы я его посмотрел на 1980 и на мобиле и всё понял. Пожалуйста. 

 

Просто некоторое время назад мне очень сильно рвало шаблон слово параллакс, посмотрел кучу страниц с этим самым "параллаксом" и нифига не понял где же там параллакс (тот самый, который настоящий), у меня есть ощущение, что верстальщики сами не могут договориться, что называть параллаксом, потому что читаю описание к примеру. Написано: параллакс, что вижу я: несколько объектов прокручиваются медленнее чем остальные. Где параллакс? 

[rash]

Объясните нахрена нужен бутстрап? Меня один раз заставили использовать так я весь изматерился, ну не мудрено, у меня ведь руки из жопы, всё хорошее у меня в руках будет работать не правильно. Тем не менее суть я так и не понял, что касается css вообще не очевидны преимущества. 

Я почти не пользовался, когда пользовался была еще только вторая версия.

 

Для себя пришел к выводу, что полезно не так для версти, как для прототипирования. Например, позволяет «накидать» что-то вроде: «вот здесь у нас будет текст в 4 колонки, тут форма с тремя инпутами и 24 кнопками, тут — содержание, которое не скрывается при прокрутке» и т. д. Чтобы оценить удобство формы до того, как дизайнер начал ее рисовать, например.

 

Ну или иногда бывает, что нужно просто публиковать контент, не так важно, как именно он оформлен (например, документация или что-нибудь подобное). Бутстрап позволит сделать это быстро и относительно аккуратно.

 

В общем, при имеющемся более-менее сложном дизайне — бутстрап не очень помогает. Но может помочь на том этапе, когда дизайн еще не начали рисовать.

[ShumNo]

 

Бытует мнение, что для части сайтов фреймворки типа bootstrap облегчают жизнь

Чем? И кому? Вот есть у меня селект кастомный и чем мне здесь бутстрап поможет? Или нарисовал дизайнер кнопку, ну типа ок, а где в бутстрапе за 5 сек настроить себе такую же? 

 

Нет, бутстрап за вас не нарисует и не сверстает

[Анна]

Можно мне пример адаптивно свёрстанного сайта, чтобы я его посмотрел на 1980 и на мобиле и всё понял. Пожалуйста. 

Так дизайн-то будет разным при мобильном сайте и страницы в окне браузера. Думаю примерами могут быть большинство сайтов имеющих мобильную версию.

Если параллакс можно считать, как модную штучку в тот момент, это, на мой взгляд, неприменимо к адаптивной верстке. Адаптивная верстка не дань моде, а поиск решения для приспособления страницы к разным устройствам, которые будут только увеличиваться в будущем.

[Игорь Ермаков]

Так дизайн-то будет разным при мобильном сайте и страницы в окне браузера. Думаю примерами могут быть большинство сайтов имеющих мобильную версию.

Адаптивная верстка не дань моде, а поиск решения для приспособления страницы к разным устройствам, которые будут только увеличиваться в будущем.

Снова ничего не понял. Тогда откуда вдруг взялось слово "адаптивная", раньше просто клепали мобильные версии сайтов и было нормально, а теперь значит, говорят адаптивная вёрстка, а получается, что всё также, разная вёрстка для мобилы и монитора? Не прикольно как-то, в чём адаптивность тогда? К чему она адаптируется?

[mishka]

rash очень точно ответил.

Но к сожалению в реальности дизайнер рисует как умеет, клиент наслушавшись новых слов хочет применить это на своем сайте, менеджер проекта обещает все что может лишь бы клиент платил, а верстальщик потом как может так и извращается.

 

 

 

Адаптивная верстка не дань моде, а поиск решения для приспособления страницы к разным устройствам, которые будут только увеличиваться в будущем.

 

Мне на смартфоне намного удобнее просматривать сайт который сделан для десктопа и его минимальная ширина 960 пикселей.

 

Даже на этом форуме для удобства включаю десктопную версию (телефон у меня не большой 4.3")

 

Так дизайн-то будет разным при мобильном сайте и страницы в окне браузера. Думаю примерами могут быть большинство сайтов имеющих мобильную версию.

 

Адаптивная верстка не дань моде, а поиск решения для приспособления страницы к разным устройствам, которые будут только увеличиваться в будущем.

Снова ничего не понял. Тогда откуда вдруг взялось слово "адаптивная", раньше просто клепали мобильные версии сайтов и было нормально, а теперь значит, говорят адаптивная вёрстка, а получается, что всё также, разная вёрстка для мобилы и монитора? Не прикольно как-то, в чём адаптивность тогда? К чему она адаптируется?

 

сейчас делают один сайт и для мобил и для десктопов. Медиазапросы в стилях позволяют управлять отображением элементов в зависимости от ширины окна браузера, от dpi экрана.

[Анна]

Тогда откуда вдруг взялось слово "адаптивная", раньше просто клепали мобильные версии сайтов и было нормально, а теперь значит, говорят адаптивная вёрстка, а получается, что всё также, разная вёрстка для мобилы и монитора? 

Вы против слова "адаптивная"? Но ведь это ни мобильная отдельно верстка, ни отдельно десктопная, надо же как-то назвать?

 

Мне на смартфоне намного удобнее просматривать сайт который сделан для десктопа и его минимальная ширина 960 пикселей

Да, но сайты, особенно новые, имеют тенденцию становиться тяжеловесными, и не каждый владелец телефона из-за лимита трафика может позволить себе просматривать десктопные версии.

[mishka]

Да, но сайты, особенно новые, имеют тенденцию становиться тяжеловесными, и не каждый владелец телефона из-за лимита трафика может позволить себе просматривать десктопные версии.

Я наблюдаю обратную ситуацию -- для айпедов, айфонов с ретина-дисплеем и других мобильных устройств с большим pixel ratio картинки делают в 4 раза больше.

А вот скорость интернета через стили не определить.

[lexxcode]

Мне на смартфоне намного удобнее просматривать сайт который сделан для десктопа и его минимальная ширина 960 пикселей.   Даже на этом форуме для удобства включаю десктопную версию (телефон у меня не большой 4.3")

Мне в большинстве случаев тоже удобнее смотреть полноценную десктопную версию. Но проблема не в нас, а в плохой продуманности мобильных вариантов сайтов. Т.к. часто мобильную версию приходится делать по наитию без макета, а просто пытаясь скомкать десктоп версию в маленький экран.

 

 

Что касается bootstrap... Согласен с господином rash. Это хорошая штука для быстрого прототипирования, собственно то для чего его и придумали изначально. А пытаться клепать на нем конечные сайты, по меньшей мере странно

[Анна]

Я наблюдаю обратную ситуацию -- для айпедов, айфонов с ретина-дисплеем и других мобильных устройств с большим pixel ratio картинки делают в 4 раза больше.   

 

 

Возможно  это соответствует потребностям какой-то категории пользоватлей, тем более ,что  pixel ratio как-то можно указать через медиа.

 

 

А вот скорость интернета через стили не определить.  

 

 

В том-то и дело, значит, лучше делать что-то облегченное для всех...

 

rash, mishka, alexriz  заставили задуматься по поводу прототипирования и вообще использования этих фреймворков

[mishka]

Возможно  это соответствует потребностям какой-то категории пользоватлей, тем более ,что  pixel ratio как-то можно указать через медиа.

 

Я вот и говрю что для мобил, с помощью медиазапросов, делают более качественные бекграунды и картинки(для картинок джс применяют), которые тяжелее и трафика больше уходит.

У меня планшет нексус 10, разрешение 2560 х 1600, обычные картинки смотрятся размыто.

Адаптивная верстка не для экономии трафика, а для того чтобы можно было сделать сайт удобным юзерам с маленьким экраном.

 

Но чаще всего на современном смартфоне удобнее юзать десктопную версию сайта.

[Анна]

Адаптивная верстка не для экономии трафика, а для того чтобы можно было сделать сайт удобным юзерам с маленьким экраном.  

Ну да всем не угодишь))). Думаю это надо рассматривать отдельно для каждого проекта(для чего он, для какой категории пользователей...)

[nerv]

Но к сожалению в реальности дизайнер рисует как умеет, клиент наслушавшись новых слов хочет применить это на своем сайте, менеджер проекта обещает все что может лишь бы клиент платил

какой-то неправильный менеджер. Если ожидания клиента не оправдаются, 1) менеджер может оказаться в неприятной ситуации, 2) потеряет клиента, возможно постоянного

[klierik]

klierik, а интерфейс для сборки только в LESS, для сборки обычного CSS нету его?

 

исходник написан на LESS. на сегодняшний день только ленивый не сможет LESS скомпилировать в CSS.

Но если уж и курить данную кухню, то надо правильно -- использовать сорсы и под проект подгонять требуемые компоненты, компилировать при помощи grunt.

[Анна]

klierik понятно, буду экспериментировать!

[Sergik+]

Апну тему, что не так с bootstap ?

Сижу изучаю потихоньку, реально за один вечер понять суть. Кто пишет что на нем есть ограничения по верстке просто не разобрались.

Очень легкий, прост в изучении, адаптивный, думаю 90% лендингов из коробки можно верстать.

Да и у новичков меньше какашечных дизайнов будет.

[Евгений_SB]

Апну тему, что не так с bootstap ?

Сижу изучаю потихоньку, реально за один вечер понять суть. Кто пишет что на нем есть ограничения по верстке просто не разобрались.

Очень легкий, прост в изучении, адаптивный, думаю 90% лендингов из коробки можно верстать.

Да и у новичков меньше какашечных дизайнов будет.

 

 

Bootstrap хорошая вещь когда не надо особо заморачиваться с дизайном, и надо быстро сверстать лендинг или обычную страницу, при готовом дизайне пользоваться Bootstrapom не вижу смысла, проще и быстрее все написать самому , поэтому практически не пользуюсь, Bootstrap помоему придумали ленивые дизайнеры и верстальщики, которые штампуют по 50 лендингов в день)))